/**
 * Navigation
 */

nav.sf-navigation{
    & > ul{
        & > li{
            a{
                position: relative;
                &::before{
                    content: "";
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    height: 1px;
                    margin-top: -1px;
                    width: calc(100% - 40px);
                    transform: scaleX(0);
                    background: #ffffff;
                    transition: all 0.3s ease-out;
                }
            }
            &:hover, &.is-active{
                a{
                    &::before{
                        transform: scaleX(1);
                    }
                }
            }
            &:first-child{
                a{
                    padding-left: 0;
                    &::before{
                        left: 0;
                        width: calc(100% - 20px);
                    }
                }
            }
            &:last-child{
                a{
                    padding-right: 0;
                    &::before{
                        left: auto;
                        right: 0;
                        width: calc(100% - 20px);
                    }
                }
            }
        }
    }
    ul{
        padding-left: 0;
        margin-bottom: 0;
        font-size: 0;
        li{
            display: inline-block;
            font-size: 16px;
            a{
                display: inline-block;
                line-height: 24px;
                font-size: 14px;
                text-transform: uppercase;
                font-weight: 400;
                color: #ffffff;
                padding: 17px 20px;
            }
        }
    }

    @media #{$lg-layout}{
        ul{
            li{
                a{
                    padding: 17px 15px;
                }
            }
        }
    }
}




/* Dropdown Styles */
nav.sf-navigation{
    ul{
        li:not(.megamenu-active){
            position: relative;
            ul{
                border-bottom: 3px solid $theme-color;
                position: absolute;
                left: 0;
                width: 250px;
                top: 100%;
                background: #ffffff;
                text-align: left;
                padding: 15px 0;
                box-shadow: 0 2px 3px rgba(#000, 0.15);
                transition: all 0.2s ease-out 0s;
                visibility: hidden;
                transform: scaleY(0);
                transform-origin: 0 0;
                z-index: 10;
                li{
                    display: block;
                    a{
                        display: block;
                        padding: 2px 20px;
                        font-family: $body-font;
                        color: $body-color;
                        font-weight: 400;
                        font-size: 14px;
                        &::before{
                            display: none;
                        }
                        &:hover{
                            color: $theme-color;
                        }
                    }
                    ul{
                        left: calc(100% + 1px);
                        top: 0;
                    }
                }
            }
            &:hover{
                & > ul{
                    visibility: visible;
                    transform: scaleY(1);
                }
            }
        }
    }
}




/* Megamenu */
.header-bottom-inner{
    position: relative;
}
nav.sf-navigation{
    ul{
        li.megamenu-active{
            position: inherit;
            & > ul{
                border-bottom: 3px solid $theme-color;
                position: absolute;
                left: 0;
                width: 100%;
                top: 100%;
                background: #ffffff;
                text-align: left;
                padding: 0;
                box-shadow: 0 2px 3px rgba(#000, 0.15);
                transition: all 0.2s ease-out 0s;
                visibility: hidden;
                transform: scaleY(0);
                transform-origin: 0 0;
                z-index: 10;
                display: flex;
                justify-content: space-between;
                & > li{
                    flex-basis: 0;
                    flex-grow: 1;
                    border-right: 1px solid #e5e5e5;
                    padding: 25px;
                    & > a{
                        display: block;
                        font-weight: 700;
                        border-bottom: 1px solid #e5e5e5;
                        color: $theme-color;
                        font-size: 14px;
                        font-family: $heading-font;
                        padding: 0;
                        padding-bottom: 3px;
                        text-transform: uppercase;
                        margin-bottom: 15px;
                        &::before{
                            display: none;
                        }
                    }
                }
                ul{
                    box-shadow: none;
                    position: relative;
                    top: 0;
                    visibility: visible;
                    transform: scaleY(1);
                    width: inherit;
                    border-top: none;
                    padding: 0;
                    border-bottom: 0;
                    li{
                        a{
                            padding-left: 0;
                            padding-right: 0;
                        }
                    }
                }
            }

            &:hover{
                & > ul{
                    visibility: visible;
                    transform: scaleY(1);
                }
            }

        }
    }
}


@media #{$lg-layout}{
    nav.sn-navigation ul li.megamenu-active > ul > li{
        padding: 25px 20px;
    }
}